<template>
    <div  class="app-wrapper">
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item v-for="itr in functionRoutes" v-if="!itr.hidden">
                <router-link  :to="{name:itr.name}">
                    {{itr.meta.title}}
                </router-link>
            </el-menu-item>
        </el-menu>
        <app-main />
    </div>

</template>

<script>

    import  AppMain  from './components/AppMain'
    import  {functionRoutes}  from '@/router'
    export default {
        name: "home",
        components: {
            AppMain,
        },
        data() {
            return {
                functionRoutes:functionRoutes
            }
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/styles/mixin.scss";
    @import "~@/styles/variables.scss";

    .app-wrapper {
        @include clearfix;
        position: relative;
        height: 100%;
        width: 100%;

        &.mobile.openSidebar {
            position: fixed;
            top: 0;
        }
    }

    .drawer-bg {
        background: #000;
        opacity: 0.3;
        width: 100%;
        top: 0;
        height: 100%;
        position: absolute;
        z-index: 999;
    }

    .fixed-header {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9;
        width: calc(100% - #{$sideBarWidth});
        transition: width 0.28s;
    }

    .hideSidebar .fixed-header {
        width: calc(100% - 54px)
    }

    .mobile .fixed-header {
        width: 100%;
    }
</style>
